import React, { useState } from "react";
import './tablecss.css'

export function MyTable() {
    const [list, setList] = useState([
        {
            name: '张三',
            age: 18,
            addres: "湖北",
            status: false
        }, {
            name: '李四',
            age: 18,
            addres: "湖北",
            status: false
        }, {
            name: '王五',
            age: 18,
            addres: "湖北",
            status: false
        }
    ]);

    const [taglist, setTaglist] = useState([
        { title: "姓名" },
        { title: "年龄" },
        { title: "地址" },
    ]);

    // 删除
    function onDel(item: { name: string; age: number; addres: string; status: boolean; }, index: number) {
        const newList = [...list];
        newList.splice(index, 1);
        setList(newList);
    }

    // 编辑
    function onEdit(item: { name: string; age: number; addres: string; status: boolean; }, index: number) {
        const newList = [...list];
        newList[index].status = true;
        setList(newList);
    }

    // 保存
    function onSave(item: { name: string; age: number; addres: string; status: boolean; }, index: number) {
        const newList = [...list];
        newList[index].status = false;
        setList(newList);
    }

    // Input 改变事件
    function changeItem(item: { [x: string]: string; name?: string; age?: number; addres?: string; status?: boolean; }, index: number) {
        const newList = [...list];
        newList[index] = { ...newList[index], ...item };
        setList(newList);
    }

    // 添加
    function add() {
        const newList = [...list];
        newList.push({
            name: '',
            age: null,
            addres: ""
        });
        setList(newList);
    }

    const [popstatus, setPopstatus] = useState(false);
    const [newHead, setNewHead] = useState('');

    // 动态添加标题弹框
    function addHead() {
        setPopstatus(true);
    }

    // 关闭
    function off() {
        setPopstatus(false);
    }

    // 确定添加表头
    function confirmAddHead() {
        if (newHead) {
            const newTaglist = [...taglist];
            newTaglist.push({ title: newHead });
            setTaglist(newTaglist);
            setNewHead('');

            const newList = list.map(item => ({
                ...item,
                [newHead]: newHead,
            }));
            setList(newList);
        }
    }

    return (
        <div className="box">
            <div>
                <button onClick={addHead}>添加表头</button>
            </div>
            <table className="table">
                <thead>
                    <tr>
                        {taglist.map((item, index) => (
                            <th key={index}>{item.title}</th>
                        ))}
                        <th>操作</th> {/* 操作列始终位于最后一列 */}
                    </tr>
                </thead>
                <tbody>
                    {list.map((item, index) => (
                        <tr key={index}>
                            {taglist.map((tag, tagIndex) => (
                                <td key={`${index}-${tagIndex}`}>
                                    {item.status === false ? (
                                        <p>{item[tag.title]}</p>
                                    ) : (
                                        <p><input type="text" value={item[tag.title]} onChange={(e) => changeItem({ [tag.title]: e.target.value }, index)} /></p>
                                    )}
                                </td>
                            ))}
                            <td>
                                <button onClick={() => onDel(item, index)}>删除</button>
                                {item.status === false ? (
                                    <button onClick={() => onEdit(item, index)}>编辑</button>
                                ) : (
                                    <button onClick={() => onSave(item, index)}>保存</button>
                                )}
                            </td> {/* 操作按钮始终位于最后一列 */}
                        </tr>
                    ))}
                </tbody>
                <tfoot>
                    <tr>
                        <td colSpan={taglist.length + 1}>
                            <button onClick={add}>添加+</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
            {popstatus && (
                <div className="popstyle">
                    <div className="clonestyle" onClick={off}>x</div>
                    <div className="content">
                        <div>
                            标题 <input type="text" value={newHead} onChange={(e) => setNewHead(e.target.value)} />
                        </div>
                    </div>
                    <div className="btnbox">
                        <button onClick={off}>取消</button>
                        <button onClick={confirmAddHead}>确定</button>
                    </div>
                </div>
            )}
        </div>
    );
}